<template>
      
      <div class="list">
       <div class="tit_box">
        <div :style="'background:'+ hd.color+';'" class="tit_er"></div>
        <div class="tit" >{{ hd.dq }}: <div class="zs">{{ hd.title }}</div></div>
       </div>       
        <div class="item">
        <div class="lable">彩民端地址:</div>
        <div class="er " @click="copyOrderId2(hd.cm)">{{ hd.cm }}</div>
        <el-tooltip  effect="dark" content="生成二维码" placement="top-start">
          <el-button @click="creatQrCode(hd.cm)" class="btn" type="primary" icon="el-icon-view" size="mini"></el-button>
         </el-tooltip>
       </div>
       <div class="item">
        <div class="lable">店主端地址:</div>
        <div class="er " @click="copyOrderId2(hd.dzd)">{{ hd.dzd }}</div>
        <el-tooltip  effect="dark" content="生成二维码" placement="top-start">
          <el-button @click="creatQrCode(hd.dzd)" class="btn" type="primary" icon="el-icon-view" size="mini"></el-button>
         </el-tooltip>
       </div>
       <div class="item">
        <div class="lable">彩民端下载地址:</div>
        <div class="er " @click="copyOrderId2(hd.dl)">{{ hd.dl }}</div>
        <el-tooltip  effect="dark" content="生成二维码" placement="top-start">
          <el-button @click="creatQrCode(hd.dl)" class="btn" type="primary" icon="el-icon-view" size="mini"></el-button>
         </el-tooltip>
       </div>
       <div class="item">
        <div class="lable">店主端下载地址:</div>
        <div class="er " @click="copyOrderId2(hd.dl2)">{{ hd.dl2 }}</div>
        <el-tooltip  effect="dark" content="生成二维码" placement="top-start">
          <el-button @click="creatQrCode(hd.dl2)" class="btn" type="primary" icon="el-icon-view" size="mini"></el-button>
         </el-tooltip>
       </div>
       <div class="item">
        <div class="lable">彩民端注册地址:</div>
        <el-input v-model="inp" class="elinp" size="mini" placeholder="邀请码"></el-input> <el-button @click="zhuan()" class="btn" type="primary" icon="el-icon-refresh" size="mini" >转换</el-button> <el-input class="elinp2" size="mini" v-model="hd.reg" placeholder="输出内容"></el-input>
        <el-tooltip  effect="dark" content="复制连接" placement="top-start">
          <el-button @click="copyOrderId2(hd.reg)" class="btn" type="primary" icon="el-icon-share" size="mini"></el-button>
         </el-tooltip>
         <el-tooltip  effect="dark" content="生成二维码" placement="top-start">
          <el-button @click="creatQrCode(hd.reg)" class="btn" type="primary" icon="el-icon-view" size="mini"></el-button>
         </el-tooltip>
       </div>
       <div class="item">
        <div class="lable">店主端注册地址:</div>
        <el-input v-model="inp2" class="elinp" size="mini" placeholder="邀请码"></el-input> <el-button @click="zhuan2()" class="btn" type="primary" icon="el-icon-refresh" size="mini" >转换</el-button> <el-input class="elinp2" size="mini" v-model="hd.reg2" placeholder="输出内容"></el-input>
        <el-tooltip  effect="dark" content="复制连接" placement="top-start">
          <el-button @click="copyOrderId2(hd.reg2)" class="btn" type="primary" icon="el-icon-share" size="mini"></el-button>
         </el-tooltip>
         <el-tooltip  effect="dark" content="生成二维码" placement="top-start">
          <el-button @click="creatQrCode(hd.reg2)" class="btn" type="primary" icon="el-icon-view" size="mini"></el-button>
         </el-tooltip>
       </div>
      
  
  
       <div id="root" ref="qrCodeUrl" class="ewm"></div>
       <el-divider><i class="el-icon-guide"></i></el-divider>
      </div>
  </template>
  
  <script>
  import QRCode from 'qrcodejs2'
  import Clipboard from 'clipboard';
  import CryptoJS from 'crypto-js'
  export default {
    name: 'zzbhd',
    props: 
    {
      passvalue:{type:Object}
    },
    data() {
        return {
        inp:'',
        inp2:'',
        yqm:'',
        yqm2:'',
        activeName: 'zzb',
        hd:{
          "cm": "",
			    "dzd": "",
			    "reg": "",
			    "reg2": "",
			    "dl": "",
			    "dl2": "",
          "color":""
        }
  
        };
      },
      watch: {
        passvalue: {
      immediate: true, //绑定值就开始执行监听，而不是等值改变。
      handler(newValue, oldValue) {
       //doSometing
       console.log(newValue)
       if(newValue){
        this.hd=newValue
       }
      },
    },
  },

      methods: {
        zhuan(){
          this.yqm=''
          this.hd.reg=this.passvalue.reg
      if(this.inp){
        this.yqm=this.encrypt(this.inp)
        this.hd.reg=this.hd.reg+this.yqm
      }
        },
        zhuan2(){
          this.yqm2=''
          this.hd.reg2=this.passvalue.reg2
      if(this.inp2){
        this.yqm2=this.encrypt(this.inp2)
        this.hd.reg2=this.hd.reg2+this.yqm2
      }
        },
        copyOrderId2(orderId) {
       var input = document.createElement("input"); // 创建input对象
       input.value = orderId; // 设置复制内容
       document.body.appendChild(input); // 添加临时实例
       input.select(); // 选择实例内容
       document.execCommand("Copy"); // 执行复制
       document.body.removeChild(input); // 删除临时实例
       this.$message.success('复制成功！');
  },
        creatQrCode(url) {
          this.$refs.qrCodeUrl.innerHTML = "";
        this.qrcode = new QRCode(this.$refs.qrCodeUrl, {
          text: url,
          width: 100,
          height: 100,
          colorDark: "#000000",
          colorLight: "#ffffff",
          correctLevel: QRCode.CorrectLevel.H
        });
      },
      encrypt(decryptText) {
          console.log(decryptText);
          var ciphertext = CryptoJS.AES.encrypt(decryptText, 'wliNdUeElEICw').toString();
          return ciphertext
      },
  
  
      }
  }
  </script>
  <style scoped>
  .list{
    margin-top: 20px;
  }
  .tit{
    font-size: 20px;
    margin-bottom: 5px;
    font-weight: bold;
    display: flex;
    align-items: flex-end;
  }
  .zs{
    font-size: 16px;
    color: #999;
    padding-left: 20px;
  
  }
  .item{
    display: flex;
    padding-top:10px;
    align-items: center;
  }
  .lable{
    width: 120px;
  }
  .er{
    text-decoration:none; 
  border-bottom:1px solid #409EFf; /* #555换成链接的颜色 */
  display: inline-block; 
  padding-bottom:2px;  /*这里设置你要空的距离*/
  margin-right: 20px;
  margin-left: 20px;
  color: #409EFf;
  }
  .ewm{
    width: 100px;
    height: 100px;
    padding: 2px;
    border: 2px solid #409EFf;
  }
  .elinp{
    width: 200px;
    margin-right: 10px;
    margin-left: 10px;
  }
  .elinp2{
    margin-right: 10px;
    margin-left: 10px;
    width: 400px;
  }
  #root{
    margin-top: 20px;
  }
  .root_text{
    height: 10px;
    line-height: 10px;
  }
  .tit_er{
    width: 10px;
    height: 10px;
    border-radius: 10px;
    margin-right: 10px;
  }
  .tit_box{
    display: flex;
    align-items: center;
  }
  </style>
  